<!--爆管监控-->
<template>
  <div class="div">
<div id="container" class="map"></div>
  <el-dialog title="武汉泵站" :visible.sync="dialogTableVisible">
   <el-button type="success" plain @click="showpump">泵站信息</el-button>
   <el-button type="success" plain @click="showpumpdata">泵站数据信息</el-button> <br/><hr>
    <!-- pump表单 -->
   <el-table :data="pumps" border style="width: 100%" v-if="a" title="武汉泵站信息">
     
     
          <el-table-column  type="index"  label="序号" width="80"> </el-table-column>
        <el-table-column prop="pumpname" label="泵站名称" width="120">
        </el-table-column>
        <el-table-column prop="pumptype" label="泵站型号" width="60">
        </el-table-column>
        <el-table-column prop="gas" label="瓦斯浓度" width="60">
        </el-table-column>
        <el-table-column prop="tp" label="抽放负压" width="60">
        </el-table-column>
        <el-table-column prop="intpower" label="入口功率" width="60">
        </el-table-column>
        <el-table-column prop="outpower" label="出口功率" width="60">
        </el-table-column>
        <el-table-column prop="temperature" label="温度(℃)" width="60">
        </el-table-column>
        <el-table-column prop="name" label="负责人" width="100">
        </el-table-column>
        
        <el-table-column prop="pumpsize" label="泵站类型" width="100">
        </el-table-column>
  </el-table> 
    <!--pumpdata表单  -->
  <el-form :inline="true" :model="f1" class="demo-form-inline" v-if="b">
        <el-form-item label="泵站型号" style="width:250px">
          <el-select v-model="f1.pumpId" placeholder="请选择" style="width:150px">
            <el-option
              v-for="pump in pumps"
              :label="pump.pumpname"
              :value="pump.id"
              :key="pump.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="日期" style="width:250px">
            <el-date-picker
            v-model="f1.time"
            type="date"
            value-format="yyyy-MM-dd"
            style="width:200px">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="reset">清空</el-button>
        </el-form-item>
      </el-form>
   <el-table :data="pumpdata" border style="width: 100%" v-if="b">
     <el-table-column prop="id" label="" width="60" v-if="false">
        </el-table-column>
        <!-- <el-table-column prop="pumpId" label="泵站Id" width="60" v-if="false">
        </el-table-column>  
         <el-table-column prop="pumpname" label="泵站" width="60" v-if="false">
        </el-table-column>  -->
         <el-table-column fixed="left" prop="time" label="时间" width="120">
        </el-table-column>  
        <el-table-column prop="inflow" label="进水流量" width="60">
        </el-table-column>
        <el-table-column prop="outflow" label="出水流量" width="60">
        </el-table-column>
        <el-table-column prop="complexflow" label="复线流量" width="60">
        </el-table-column>
        <el-table-column prop="inp" label="进水压力" width="60">
        </el-table-column>
        <el-table-column prop="outp" label="出水压力" width="60">
        </el-table-column>
        <el-table-column prop="incl" label="进水余氯" width="60">
        </el-table-column>
        <el-table-column prop="outcl" label="出水余氯" width="60" >
        </el-table-column>
        <el-table-column prop="intur" label="进水浊度" width="60">
        </el-table-column>
        <el-table-column prop="outtur" label="出水浊度" width="60">
        </el-table-column>
        <el-table-column prop="datatype" fixed="right" label="数据类型" width="60">
        </el-table-column>
      </el-table>
      <el-pagination
       background
       layout="prev, pager, next"
       :total="total"
       :page-size="5"
        @current-change="goto"
        v-if="b">
     </el-pagination>
</el-dialog>
  </div>   
</template>

<script>
export default {
  data () {
    return {
        map:"",
        point:"",
        pumps:[],
        pumpdata:[],
        a:true,
        b:false,
        dialogTableVisible:false,
         f1:{
             pumpId:'',
              time:'',
              pageIndex:1
           },
    }

  },
  methods:{
    show(){
          this.map = new BMapGL.Map("container");
          var point = new BMapGL.Point(114.314, 30.594);
          this.map.centerAndZoom(point, 15);
          this.map.enableScrollWheelZoom(true);
          this. map.addEventListener('click', e=> {
           if(e.latlng.lng>=113.41 && e.latlng.lng<=115.05 && e.latlng.lat>=29.58 && e.latlng.lat<=31.22){    
              this.dialogTableVisible=true;
              this.axios.get("/gms/getallpump").then(res=>{
                this.pumps=res.data.data;
            })     
           }         
       });
       },
       getPumps(){
           this.axios.get("/gms/getallpump").then(res=>{
                this.pumps=res.data.data;
            })     
       },
       showpump(){
         this.a=true,
         this.b=false,
         this.getPumps();
       },
       showpumpdata(){
         this.a=false;
         this.b=true;
         this.getpumpdata();
       },
       onSubmit(){
         this.getpumpdata();
       },
        getpumpdata(){
            this.axios.post("/gms/getpumpdata",this.f1).then(res=>{
                 console.log(res.data);
                 this.pumpdata=res.data.data.list;
                 this.f1.pageIndex=res.data.data.pageNum;
                 this.total=res.data.data.total;
            })
        }, 
        goto(currentpage){
          this.f1.pageIndex=currentpage;
          this.getpumpdata();
        },
        reset(){
           this.f1.pumpId='',
            this.f1.time='',
              this.f1.pageIndex=1,
              this.getpumpdata();
        }
    },
    mounted(){
      this.show();
    },
    created(){
       this.getPumps();
       this.getpumpdata();
    }
  }
    

</script>

<style scoped>
.map{
  height:100%;margin:0px;padding:0px;
  width: 100%;
  float: right;
}
.div{
   height:100%;margin:0px;padding:0px;
}


</style>
